<template>
	<view class="con">
		<view class="con-top">
			<view class="image"><view class="img"></view></view>
			<view class="nav">
				<view class="one"><text>HOLLE</text></view>
				<view class="two" @click="getesetup">
					<view class="left">
						<text>{{ userList.nickname }}</text>
					</view>
					<view class="right"><image src="../../static/index/images/return@3x.png" mode=""></image></view>
				</view>
				<view class="three"><text>立即完善个人信息</text></view>
				<view class="img"></view>
			</view>
		</view>
		<view class="con-nav">
			<view class="img">
				<image src="../../static/index/images/bg-black@2x.png" mode=""></image>
				<text>打造专属于{{ userList.nickname || '请登录' }}的精品小站</text>
			</view>
			<view class="grid">
				<u-grid :col="3" :border="false">
					<u-grid-item @click="shopping">
						<image src="../../static/index/images/商城@3x.png" mode=""></image>
						<view class="grid-text">精品商城</view>
					</u-grid-item>
					<u-grid-item @click="order">
						<image src="../../static/index/images/券@3x.png" mode=""></image>
						<view class="grid-text">订单中心</view>
					</u-grid-item>
					<u-grid-item @click="coupon">
						<image src="../../static/index/images/券@3x.png" mode=""></image>
						<view class="grid-text">优惠券</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="con-bottom">
			<view class="top">
				<image src="../../static/index/images/余额@3x.png" mode=""></image>
				<text>余额</text>
			</view>
			<view class="bottom">
				<view class="left">
					<view class="top">
						<text class="price">￥</text>
						<text class="num">{{ userList.money }}</text>
					</view>

					<view class="bottom"><text>您暂时还没有储值哦</text></view>
				</view>
				<view class="right"><text @click="Recharge">充值</text></view>
			</view>
		</view>
		<view class="con-footer" @click="address">
			<view class="left">
				<image src="../../static/index/images/地址@3x.png" mode=""></image>
				<text>收货地址管理</text>
			</view>
			<view class="right">
				<text>选择收货地址</text>
				<image src="../../static/index/images/return@3x.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="con-banner"><image src="../../static/index/images/Home%20Indicator@3x.png" mode=""></image></view> -->
	</view>
</template>

<script>
import { user, init } from '@/api/api.js';
export default {
	data() {
		return {
			userList: []
		};
	},
	onShow() {
		this.login();
	},
	mounted() {
		this.user();
		this.init();
	},
	methods: {
		login() {
			// console.log(11111);
			let token = '6519a029-85c1-4e54-bc21-be3e6b8ef8e8';
			uni.setStorageSync('token', token);
			// uni.login({
			// 	provider: 'weixin',
			// 	success: async res => {
			// 		let n = await this.$api.session_id({
			// 			autoLogin: true,
			// 			code: res.code
			// 		});
			// 		uni.setStorageSync('session_id', n.data.session_id);
			// 	},
			// 	fail: res => {
			// 		console.log(res, '失败');
			// 	}
			// });
		},
		shopping() {
			uni.navigateTo({
				url: '../Shopping/Shopping'
			});
		},
		order() {
			uni.navigateTo({
				url: '../order/order'
			});
		},
		coupon() {
			uni.navigateTo({
				url: '../coupon/coupon'
			});
		},
		Recharge() {
			uni.navigateTo({
				url: '/pages/coupon/Recharge'
			});
		},
		address() {
			uni.navigateTo({
				url: '/pages/address/address'
			});
		},
		getesetup() {
			// console.log('222');
			uni.navigateTo({
				url: '/pages/index/setup'
			});
		},
		async user() {
			let res = await user();
			console.log(res, 333);
			if (res.code == 1) {
				this.userList = res.data;
				uni.setStorageSync('userinof', res.data);
			} else {
				this.userList = [];
			}
		},
		async init() {
			let res = await init();
			console.log(res, 333);
			uni.setStorageSync('recharge', res.data.recharge);
			// if (res.code == 1) {
			// 	this.userList = res.data;
			// 	uni.setStorageSync('userinof',res.data)
			// } else {
			// 	this.userList = [];
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
* {
	box-sizing: border-box;
}
.con {
	width: 100%;
	// min-height: 1624rpx;
	background: rgba(241, 241, 241, 1);
	padding-bottom: 50rpx;
	.con-top {
		width: 100%;
		height: 608rpx;

		.image {
			width: 330rpx;
			height: 120rpx;
			// background: red;
			padding-top: 48rpx;
			padding-left: 48rpx;

			.img {
				width: 100%;
				height: 100%;
				background: url('../../static/index/images/Frame 34@3x.png') no-repeat;
				background-size: 100% 100%;
			}
		}

		.nav {
			position: relative;

			.one {
				margin-top: 122rpx;
				margin-left: 32rpx;

				text {
					// width: 210rpx;
					height: 74rpx;
					font-size: 64rpx;
					font-family: Akzidenz-Grotesk BQ-Bold, Akzidenz-Grotesk BQ;
					font-weight: bold;
					color: #000000;
					// line-height: 75rpx;
				}
			}

			.two {
				margin-left: 32rpx;
				position: relative;
				display: flex;
				z-index: 22;
				.left {
					// width: 370rpx;
					height: 96rpx;
					font-size: 64rpx;
					font-family: Source Han Sans SC-Bold, Source Han Sans SC;
					font-weight: bold;
					color: #000000;
					margin-right: 18rpx;
					margin-top: -15rpx;
					line-height: 96rpx;
				}

				.right {
					width: 56rpx;
					height: 56rpx;
					margin-top: 10rpx;

					// position: absolute;
					// top: 50%;
					// transform: translate(0,-50%);
					// margin-left: ;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.three {
				margin-left: 32rpx;

				text {
					width: 224rpx;
					height: 42rpx;
					font-size: 28rpx;
					font-family: Source Han Sans SC-Regular, Source Han Sans SC;
					font-weight: 400;
					color: #aaaaaa;
					line-height: 33rpx;
				}
			}

			.img {
				width: 750rpx;
				height: 608rpx;
				position: absolute;
				bottom: -250rpx;
				// margin-top: -400rpx;
				right: 0;
				background: url('../../static/index/images/background.png') no-repeat;
				background-size: 100% 100%;
				z-index: 11;
				// image {
				// 	width: 100%;
				// 	height: 100%;
				// }
			}
		}
	}

	.con-nav {
		width: 686rpx;
		height: 310rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 36rpx 0rpx rgba(188, 188, 188, 0.25);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		// opacity: 1;
		margin: auto;
		overflow: hidden;

		.img {
			width: 100%;
			height: 106rpx;
			border-radius: 16rpx 16rpx 0 0;
			position: relative;
			// line-height: 106rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx 16rpx 0 0;
			}
			text {
				position: absolute;
				top: 34rpx;
				left: 36rpx;
				z-index: 999;
				font-size: 28rpx;
				font-family: Source Han Sans SC-Bold, Source Han Sans SC;
				font-weight: bold;
				color: #ffffff;
			}
		}

		.grid {
			// margin-bottom: 20rpx;
			padding-top: 24rpx;
			border-radius: 0rpx 0rpx 16rpx 16rpx;

			image {
				width: 66rpx;
				height: 66rpx;
				margin-bottom: 8rpx;
			}
			.u-grid.data-v-a7b3bc80 {
				border-radius: 16rpx 16rpx;
			}
			.grid-text {
				height: 42rpx;
				font-size: 28rpx;
				font-family: Source Han Sans SC-Medium, Source Han Sans SC;
				font-weight: 500;
				color: #001b0a;
				line-height: 33rpx;
			}
		}
	}

	.con-bottom {
		width: 686rpx;
		height: 264rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 36rpx 0rpx rgba(188, 188, 188, 0.25);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		// opacity: 1;
		margin: 48rpx auto;

		.top {
			height: 48rpx;
			margin: 24rpx 28rpx;
			padding-top: 24rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 12rpx;
				vertical-align: middle;
			}

			text {
				width: 64rpx;
				height: 48rpx;
				font-size: 30rpx;
				font-family: Source Han Sans SC-Medium, Source Han Sans SC;
				font-weight: 500;
				color: #000000;
				line-height: 48rpx;
				// margin-top: 3rpx;
			}
		}

		.bottom {
			position: relative;
			.left {
				.top {
					margin-top: 28rpx;

					.price {
						width: 32rpx;
						height: 48rpx;
						font-size: 32rpx;
						font-family: Source Han Sans SC-Medium, Source Han Sans SC;
						font-weight: 500;
						color: #000000;
						line-height: 48rpx;
						margin-right: 16rpx;
					}

					.num {
						width: 146rpx;
						height: 48rpx;
						font-size: 72rpx;
						font-family: Source Han Sans SC-Medium, Source Han Sans SC;
						font-weight: 500;
						color: #000000;
						line-height: 48rpx;
					}
				}

				.bottom text {
					width: 216rpx;
					// height: 48rpx;
					font-size: 24rpx;
					font-family: Source Han Sans SC-Regular, Source Han Sans SC;
					font-weight: 400;
					color: #aaaaaa;

					// line-height: 48rpx;
					margin-left: 34rpx;
					// margin-bottom: 24rpx;
				}
			}

			.right {
				position: absolute;
				width: 160rpx;
				height: 72rpx;
				background: #001b0a;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				line-height: 72rpx;
				right: 30rpx;
				bottom: 8rpx;

				text {
					width: 64rpx;
					height: 48rpx;
					font-size: 32rpx;
					font-family: Source Han Sans SC-Regular, Source Han Sans SC;
					font-weight: 400;
					color: #ffffff;
					line-height: 48rpx;
				}
			}
		}
	}

	.con-footer {
		width: 686rpx;
		height: 106rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 36rpx 0rpx rgba(188, 188, 188, 0.25);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: auto;
		// line-height: 106rpx;
		padding: 30rpx 32rpx 28rpx 28rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		.left {
			image {
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
				margin-right: 6rpx;
			}

			text {
				height: 48rpx;
				font-size: 32rpx;
				font-family: Source Han Sans SC-Medium, Source Han Sans SC;
				font-weight: 500;
				color: #000000;
				line-height: 48rpx;
				// margin-top: 8rpx;
			}
		}

		.right {
			image {
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
			}

			text {
				width: 168rpx;
				height: 48rpx;
				font-size: 28rpx;
				font-family: Source Han Sans SC-Regular, Source Han Sans SC;
				font-weight: 400;
				color: #aaaaaa;
				line-height: 48rpx;
				margin-right: 8rpx;
			}
		}
	}

	.con-banner {
		width: 750rpx;
		height: 68rpx;
		background: #ffffff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 0rpx solid #ffffff;
		margin-top: 50rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
